<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>财务报表</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="financial-statements">
      <div class="financial-statements-btns">
        <el-button size="medium" type="primary" @click="exportExcel">导出excel</el-button>
        <el-button size="medium" type="primary" @click="print">打印</el-button>
      </div>
      <template v-if="annualInitialData!==null">
        <div class="financial-statements-title">
          财 务 报 表
        </div>
        <table ref="financialTable" class="financial-statements-table" cellspacing="0" cellpadding="0">
          <colgroup>
            <col width="20%">
            <col width="50" style="text-align:center">
            <col width="15%">
            <col width="15%">
            <col width="20%">
            <col width="50" style="text-align:center">
            <col width="15%">
            <col width="15%">
          </colgroup>
          <thead>
            <tr>
              <th>资产</th>
              <th>行次</th>
              <th>年初值</th>
              <th>期末值</th>
              <th>负债及所有者权益</th>
              <th>行次</th>
              <th>年初值</th>
              <th>期末值</th>
            </tr>
          </thead>
          <tbody>
            <template v-for="(num,index) in rowNum">
              <tr :key="`item_${num}`">
                <td :class="{sum:assetItems[index]&&assetItems[index].isSum,sumRow:assetItems[index]&&assetItems[index].isSum}">
                  <span style="color:#000000;" :style="getTitleStyle('assetItems',index)">
                    {{getLabel('assetItems',index,'title')}}
                  </span>
                </td>
                <td>
                  {{getLabel('assetItems',index,'rowIndex')}}
                </td>
                <td data-type="money" :class="{sumRow:assetItems[index]&&assetItems[index].isSum}">{{getValue('assetItems',index,'start')}}</td>
                <td data-type="money" :class="{sumRow:assetItems[index]&&assetItems[index].isSum}">{{getValue('assetItems',index,'end')}}</td>
                <td
                  :class="{sum:liabilityOrEquityItems[index]&&liabilityOrEquityItems[index].isSum,sumRow:liabilityOrEquityItems[index]&&liabilityOrEquityItems[index].isSum}">
                  <span style="color:#000000;" :style="getTitleStyle('liabilityOrEquityItems',index)">
                    {{getLabel('liabilityOrEquityItems',index,'title')}}
                  </span>
                </td>
                <td>
                  {{getLabel('liabilityOrEquityItems',index,'rowIndex')}}
                </td>
                <td data-type="money" :class="{sumRow:liabilityOrEquityItems[index]&&liabilityOrEquityItems[index].isSum}">
                  {{getValue('liabilityOrEquityItems',index,'start')}}</td>
                <td data-type="money" :class="{sumRow:liabilityOrEquityItems[index]&&liabilityOrEquityItems[index].isSum}">
                  {{getValue('liabilityOrEquityItems',index,'end')}}</td>
              </tr>
            </template>
          </tbody>
        </table>
      </template>
    </div>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile();

</script>
<script src="https://upload.shinehao.com.cn/20190523111638xlsx.full.min.js"></script>
<script src="https://upload.shinehao.com.cn/20190523111634xlsx-style.full.min.js"></script>
<script src="https://upload.shinehao.com.cn/20180809110727FileSaver.min.js"></script>
<script src="https://upload.shinehao.com.cn/20180809110421Blob.js"></script>
<script src="../../static/excel/Export2Excel.js"></script>
<script type="text/javascript">
  var app = new Vue({
    el: '#app',
    data: function () {
      return {
        loading: false,
        annualInitialData: null,
        endyearData: null,
        rowNum: 17,
        assetItems: [{
          title: '流动资金：',
        }, {
          title: '应收帐款',
          rowIndex: 1,
          indent: 1,
          field: 'yingShouZhangKuan'
        }, {
          title: '其他应收款',
          rowIndex: 2,
          indent: 1
        }, {
          title: '预付帐款',
          rowIndex: 3,
          indent: 1
        }, {
          title: '存货',
          rowIndex: 4,
          indent: 1,
          field: 'cunHuo'
        }, {
          title: '流动资产合计',
          rowIndex: 5,
          isSum: true,
          field: 'currentAssetsSum'
        }, {
          title: '固定资产：'
        }, {
          title: '固定资产原价',
          rowIndex: 6,
          indent: 1,
          field: 'gunDingZiCan'
        }, {
          title: '减：累计折旧',
          rowIndex: 7,
          indent: 2,
          field: 'leiJiXheJiu'
        }, {
          title: '固定资产净值',
          rowIndex: 8,
          indent: 1,
          field: 'fixedAssetsNet'
        }, {
          title: '工程物资',
          rowIndex: 9,
          indent: 1
        }, {
          title: '固定资产合计',
          rowIndex: 10,
          isSum: true,
          field: 'fixedAssetsSum'
        }, {
          title: '其他资产：'
        }, {
          title: '各车间在制品',
          rowIndex: 11,
          indent: 1,
          field: 'cheJinZaiZhi'
        }, {
          title: '其他资产合计',
          rowIndex: 12,
          isSum: true,
          field: 'otherAssetsSum'
        }, null, {
          title: '资产总计',
          isSum: true,
          field: 'assetsSum'
        }],
        liabilityOrEquityItems: [{
          title: '流动负债：'
        }, {
          title: '短期借款',
          rowIndex: 13,
          indent: 1
        }, {
          title: '应付帐款',
          rowIndex: 14,
          indent: 1,
          field: 'yingFuZhangKuan'
        }, {
          title: '预收账款',
          rowIndex: 15,
          indent: 1
        }, {
          title: '应付工资',
          rowIndex: 16,
          indent: 1,
          field: 'yingFuGongZi'
        }, {
          title: '应付税金',
          rowIndex: 17,
          indent: 1
        }, {
          title: '其他应付款',
          rowIndex: 18,
          indent: 1
        }, {
          title: '流动负债合计',
          rowIndex: 19,
          isSum: true,
          field: 'currentLiabilitiesSum'
        }, null, {
          title: '股东权益：'
        }, {
          title: '实收股本',
          rowIndex: 20,
          indent: 1
        }, {
          title: '加：利息',
          rowIndex: 21,
          indent: 2
        }, {
          title: '减：已归还股本',
          rowIndex: 22,
          indent: 2
        }, {
          title: '实收股本净额',
          rowIndex: 23,
          isSum: true
        }, null, {
          title: '所有者权益（股东权益）合计',
          rowIndex: 24,
          isSum: true,
          field: 'assetsSum'
        }, {
          title: '债务和所有者权益（股东权益）总计',
          rowIndex: 25,
          isSum: true,
          field: 'liabilitiesAndAssetsSum'
        }]
      };
    },

    created: function () {
      this.initData();
    },

    methods: {
      initData: function () {
        this.loading = true;
        var self = this;
        ajaxRequest('warehouseInSumMoney/getFinancialStatements').then(function (data) {
          self.loading = false;

          var currentAssetsSum = data.yingShouZhangKuan + data.cunHuo;
          data.currentAssetsSum = _.round(currentAssetsSum, 2);

          var fixedAssetsNet = data.gunDingZiCan - data.leiJiXheJiu;
          data.fixedAssetsNet = _.round(fixedAssetsNet, 2);

          var fixedAssetsSum = data.fixedAssetsNet;
          data.fixedAssetsSum = _.round(fixedAssetsSum, 2);

          var otherAssetsSum = data.cheJinZaiZhi;
          data.otherAssetsSum = _.round(otherAssetsSum, 2);

          var assetsSum = data.currentAssetsSum + data.fixedAssetsSum + data.otherAssetsSum;
          data.assetsSum = _.round(assetsSum, 2);

          var currentLiabilitiesSum = data.yingFuZhangKuan + data.yingFuGongZi;
          data.currentLiabilitiesSum = _.round(currentLiabilitiesSum, 2);

          var liabilitiesAndAssetsSum = data.assetsSum - data.currentLiabilitiesSum;
          data.liabilitiesAndAssetsSum = _.round(liabilitiesAndAssetsSum, 2);

          var annualInitialData = {};
          for (const key in data) {
            annualInitialData[key] = 0;
          }
          self.annualInitialData = annualInitialData;
          self.endyearData = data;
        }).catch(function () {
          self.loading = false;
        });
      },

      getTitleStyle: function (name, index) {
        var configList = this[name];
        var config = configList[index];
        if (SysUtil.isEmpty(config)) {
          return;
        }

        var styleObj = {};
        var indent = config.indent;
        if (indent !== undefined) {
          styleObj.marginLeft = `${indent}em`;
        }
        return styleObj;
      },

      getLabel: function (name, index, field) {
        var configList = this[name];
        var config = configList[index];
        if (SysUtil.isEmpty(config)) {
          return '';
        }

        var value = config[field];
        return value;
      },

      getValue: function (name, index, type) {
        var configList = this[name];
        var config = configList[index];
        if (SysUtil.isEmpty(config)) {
          return '';
        }

        var field = config.field;
        if (SysUtil.isEmpty(field)) {
          return '';
        }

        var data;
        if (type === 'start') {
          data = this.annualInitialData;
        } else {
          data = this.endyearData;
        }

        var value = data[field];
        if (!SysUtil.isEmpty(value) && value !== 0) {
          value = value.toFixed(2);
        }
        return value;
      },

      exportExcel: function () {
        var $table = $(this.$refs.financialTable);
        var year = moment().format('YYYYMMDD')
        export_table_to_excel($table, '财务报表' + year, {
          sheetName: '财务报表',
          tableTitle: {
            value: "财务报表",
            fontSize: 18,
            colspan: 8,
            align: "center"
          },
          colWidth: [250, 50, 130, 130, 250, 50, 130, 130],
          formatCellStyle: function (style, cell) {
            var $cell = $(cell);
            var type = $cell.data('type');
            if (type === 'money') {
              _.set(style, 'numFmt', '0.00');
            }

            var $text = $cell.find('>span');
            if ($text.length > 0) {
              var marginLeft = $text.css('margin-left');
              marginLeft = parseInt(marginLeft);
              var indent = marginLeft / 14;
              indent = _.round(indent, 0);
              if (indent > 0) {
                style.indent = indent * 3;
              }
            }
          }
        });
      },

      print: function () {
        window.print();
      }
    }
  });

</script>
<style>
  .financial-statements {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    min-width: 800px;
    overflow: auto;
  }

  .financial-statements .financial-statements-title {
    text-align: center;
    font-size: 18px;
    margin-bottom: 10px;
  }

  .financial-statements>.financial-statements-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
  }

  .financial-statements>.financial-statements-table tr {
    height: 30px;
  }

  .financial-statements>.financial-statements-table td,
  .financial-statements>.financial-statements-table th {
    border: 1px solid #000000;
    padding: 0 5px;
  }

  .financial-statements>.financial-statements-table th {
    text-align: center;
    font-weight: normal;
  }

  .financial-statements>.financial-statements-table td:nth-child(2),
  .financial-statements>.financial-statements-table td:nth-child(6) {
    text-align: center;
  }

  .financial-statements>.financial-statements-table td:nth-child(3),
  .financial-statements>.financial-statements-table td:nth-child(4),
  .financial-statements>.financial-statements-table td:nth-child(7),
  .financial-statements>.financial-statements-table td:nth-child(8) {
    text-align: right;
  }

  .financial-statements>.financial-statements-table td.sum {
    text-align: center;
  }

  .financial-statements>.financial-statements-table td.sumRow {
    color: #ff0000;
    font-weight: bold;
  }

  @media print {
    .financial-statements {
      padding-left: 0;
      padding-right: 0;
    }

    .financial-statements .financial-statements-btns {
      display: none;
    }
  }

</style>

</html>
